<template>
    <div class="zgn-Alert-wrapper" v-if="toggle===true"  @click="close">
        <div :class="`zgn-theme-${theme}`" v-if="theme==='yes'">提示</div>
        <div :class="`zgn-theme-${theme}`" v-if="theme==='no'">警告</div>
        <div class="zgn-Alert-msg">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import { watch } from 'vue';
export default {
    props:{
        theme:{
            type:String,
            default:'yes'
        },
        toggle:{
            type:Boolean,
            default:false
        }
    },
    setup(props,ctx){
        watch(
            ()=>props.toggle,
            ()=>{
                if(props.toggle===true){
                    setTimeout(()=>{                   
                    ctx.emit('update:toggle',false)
                },1000)}   
            }
        )
    }
}
</script>

<style lang="scss" >
.zgn-Alert-wrapper{
    display: flex;
    padding: 0 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: fit-content;
    font-size: 14px;  
    align-items: center;
    border-radius: 5px;
    box-shadow: 1px 1px 2px 2px rgb(228, 225, 225);
    margin-top: 10px;
}
.zgn-theme-yes,.zgn-theme-no{
    margin-right: 20px ;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    box-shadow: 1px 1px 1px 1px rgb(201, 199, 199);
    
}
.zgn-theme-yes{
    background-color: rgba(5, 59, 5, 0.7);
    color: rgb(241, 236, 236);
}
.zgn-theme-no{
    background-color: rgba(95, 7, 7, 0.7);
    color: rgb(241, 236, 236);
}
</style>